<template>
	<view class="cost-container">
		<uni-forms ref="costForm" :modelValue="formData" :rules="rules">
			<!-- 申请人 -->
			<uni-forms-item label="申请人" name="applyName">
				<uni-easyinput
					v-model="formData.applyName"
					:disabled="true"
					placeholder="请输入申请人姓名"
				/>
			</uni-forms-item>
			
			<!-- 车牌号 -->
			<uni-forms-item label="车牌号" name="licensePlate">
				<uni-easyinput
					v-model="formData.licensePlate"
					placeholder="请输入车牌号"
				/>
			</uni-forms-item>
			
			<!-- 花费金额 -->
			<uni-forms-item label="花费金额" name="cost">
				<uni-easyinput
					v-model="formData.cost"
					type="number"
					placeholder="请输入花费金额"
				/>
			</uni-forms-item>
			
			<!-- 花费类型 -->
			<uni-forms-item label="花费类型" name="costType">
				<uni-data-select
					v-model="formData.costType"
					:localdata="costTypeOptions"
					placeholder="请选择花费类型"
				/>
			</uni-forms-item>
			
			<!-- 申请时间 -->
			<uni-forms-item label="申请时间" name="applyTime">
				<uni-datetime-picker
					v-model="formData.applyTime"
					type="datetime"
					:clear-icon="false"
				/>
			</uni-forms-item>
		</uni-forms>
		
		<!-- 提交按钮 -->
		<view class="submit-btn">
			<button type="primary" @click="submitCost">提交费用</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { createCost } from '@/api/cost'

const costForm = ref(null)

// 花费类型选项
const costTypeOptions = [
	{ value:1, text: '加油费' },
	{ value:2, text: '维修费' },
	{ value:3, text: '停车费' },
	{ value:4, text: '其他费用' }
]

// 表单数据
const formData = ref({
	userId:'',
	applyName: '',
	licensePlate: '',
	cost: '',
	costType: '',
	applyTime: ''
})

// 初始化用户信息
onMounted(() => {
	const applyName = uni.getStorageSync('username')
	const userId=uni.getStorageSync('userId')
	if (applyName) {
		formData.value.applyName = applyName
	}
	if(userId){
		formData.value.userId=userId
	}
	formData.value.applyTime = new Date().toISOString()
})

// 表单验证规则
const rules = {
	licensePlate: {
		rules: [{
			required: true,
			errorMessage: '请输入车牌号'
		}]
	},
	cost: {
		rules: [{
			required: true,
			errorMessage: '请输入花费金额'
		}, {
			validateFunction: (rule, value, data, callback) => {
				if (isNaN(value) || value <= 0) {
					callback('请输入有效的金额')
				}
				return true
			}
		}]
	},
	costType: {
		rules: [{
			required: true,
			errorMessage: '请选择花费类型'
		}]
	},
	applyTime: {
		rules: [{
			required: true,
			errorMessage: '请选择申请时间'
		}]
	}
}

// 提交费用
const submitCost = async () => {
	try {
		// 表单验证
		const valid = await costForm.value.validate()
		if (!valid) return
		
		// 显示加载提示
		uni.showLoading({
			title: '提交中...'
		})

		const postData = {
			userId:formData.value.userId,
			applyName:formData.value.applyName,
			licensePlate: formData.value.licensePlate,
			cost: Number(formData.value.cost),
			costType: Number(formData.value.costType),
			applyTime: formData.value.applyTime
		}
		
		// 调用提交接口
		const res = await createCost(postData)
		
		uni.hideLoading()
		
		if (res.code === 200) {
			uni.showToast({
				title: '提交成功',
				icon: 'success'
			})
			
			// 返回上一页
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		} else {
			uni.showToast({
				title: res.message || '提交失败',
				icon: 'none'
			})
		}
	} catch (error) {
		uni.hideLoading()
		uni.showToast({
			title: error.message || '提交失败',
			icon: 'none'
		})
	}
}
</script>

<style>
.cost-container {
	padding: 20rpx;
	background-color: #f5f5f5;
}

:deep(.uni-forms) {
	background-color: #fff;
	padding: 20rpx;
	border-radius: 10rpx;
}

:deep(.uni-forms-item) {
	padding: 10rpx 0;
}

:deep(.uni-easyinput__content) {
	background-color: #f8f8f8;
	border-radius: 4rpx;
}

:deep(.uni-datetime-picker) {
	width: 100%;
}

:deep(.uni-datetime-picker-timebox) {
	border: none !important;
	padding: 0 !important;
}

.submit-btn {
	margin-top: 30rpx;
	padding: 20rpx;
}

.submit-btn button {
	width: 100%;
}
</style>
